﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="User.aspx.cs" Inherits="XHCTMS.VIEW.User" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .text
        {
            border:1px solid #D2D5D8;
            height:12px;
            width:134px;
            padding:3px 6px;
            outline:none;
        }
        label
        {
            font-size:12px;
            width:30px;
        }
        .ui-button-text
        {
            font-size:10px;
        }
        .selecte
        {
            width:158px;
            position:relative;
            float:left;
            margin-left:10px;
            text-align:left;
        }
        .selecte ul
        {
            overflow-y:scroll;
            height:90px;
            z-index:2;
            display:none;
            alpha(opacity=80); 
            opacity: 0.8;
            width:146px;
            position:absolute;
            border:1px solid #D2D5D8;
            margin-top:0px;
            background-color:#e8f5fe;
            padding-left:0px;
        }
        .selecte p
        {
            background:#FFFFFF;
            margin-top:0px;
            margin-bottom:2px;
            padding:2px 6px;
            width:134px;
            height:14px;
            font-size:12px;
            line-height:14px;
            border:1px solid #D2D5D8;
            cursor:default;
        }
        .selecte ul li
        {
            text-indent:10px;
            list-style:none;
        }
        .selecte ul li a
        {
            cursor:default;
            height:20px;
            line-height:20px;
            display:block;
            text-decoration:none;
            color:Black;
        }
        .selecte ul li a:hover
        {
            background:Blue;
        }
        .divlabel
        {
            float:left;
        }
        #ui-datepicker-div
        {
            font-size:9px;
        }
        ui-accordion-accordion-panel-0
        {
            width:200px;
        }
        #GridView table tr td a
        {
           color:Blue;
           cursor:default;
        }
        #GridView table tr td a:hover
        {
            color:Red;
        }
        #GridView table tbody tr td
        {
            border-bottom:1px solid #D2D5D8;
            border-top:1px solid #D2D5D8;
            padding:3px 6px;
            font-size:12px;
            color:#333333;
        }
        #GridView table thead tr td
        {
            border-bottom:2px solid #888888;
            font-size:13px;
            font-weight:bold;
            color:#333333;
            padding:3px 6px;
            background-color:#BBBBBB;
        }
         #GridView table
        {
            border-collapse: collapse;
            width:100%;
            border:1px solid #D2D5D8;
            cursor:default;
        }
         #GridView table tbody tr td input
        {
            border:1px solid #D2D5D8;
            height:12px;
            font-size:12px;
            width:100px;
            outline:none;
        }
        #atitel:hover
        {
            background-color:#90ACC6;
        }
        
        .colos
        {
            float:right;
            width:16px;
        }
    </style>
    <link href="css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/ie6.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <script src="js/date.js" type="text/javascript"></script>
    <script type="text/javascript">

        (function ($) {

            $.fn.grid = function () {
                $(this)
            .click(function () {
                var gr = $(this).next("div");
                if (gr.css("display") == "none") {
                    $(this).find("span").removeClass("ui-icon ui-icon-triangle-1-s");
                    $(this).find("span").addClass("ui-icon ui-icon-triangle-1-n");
                    gr.slideDown(360);
                }
                else {
                    $(this).find("span").removeClass("ui-icon ui-icon-triangle-1-n");
                    $(this).find("span").addClass("ui-icon ui-icon-triangle-1-s");
                    gr.slideUp(360);
                }

            }).mouseout(function () {
                $(this).css("background-color", ""); //99CCFF
            })
            .mousemove(function () {
                $(this).css("background-color", "#86A3BD");
            })
            };


            $.fn.extend({
                enterleave: function () {
                    $(this).mouseenter(function () {
                        $(this).css("color", "red");
                    })
                .mouseleave(function () {
                    $(this).css("color", "");
                });
                }
            });

            $.fn.extend({
                textnumber: function () {
                    $(this).keyup(function () {
                        $(this).val($(this).val().replace(/\D|^0/g, ''));
                    }).bind("paste", function () {
                        $(this).val($(this).val().replace(/\D|^0/g, ''));
                    }).css("ime-mode", "disabled");
                }
            });
        })(jQuery);


        $(function () {

            $("#indexpage").keyup(function () {
                $(this).val($(this).val().replace(/\D|^0/g, ''));
            }).bind("paste", function () {
                $(this).val($(this).val().replace(/\D|^0/g, ''));
            }).css("ime-mode", "disabled");
            $("#add").button({ icons: { primary: "ui-icon-circle-plus"} });
            $("#Save").button({ icons: { primary: "ui-icon-check"} });
            $("#search").button({ icons: { primary: "ui-icon-search" }, text: false });
            $("#Ononepage").enterleave(); //.button({ icons: { primary: "ui-icon-triangle-1-w" }, text: false });
            $("#Thenextpage").enterleave(); //.button({ icons: { primary: "ui-icon-triangle-1-e" }, text: false });
            $("#firstpage").enterleave(); //.button({ icons: { primary: "ui-icon-seek-first" }, text: false });
            $("#lastpage").enterleave(); //.button({ icons: { primary: "ui-icon-seek-end" }, text: false });
            $("#pages").enterleave();


            $(document).bind("selectstart", function () {
                return false;
            })

            $(document).bind("contextmenu", function () { return false; })

            $("#operate").grid();

            $("#grid").grid();
            //                        .click(function () {
            //                            var gr = $(this).next("div"); //$("#grids");
            //                            if (gr.css("display") == "none") {
            //                                $(this).find("span").removeClass("ui-icon ui-icon-triangle-1-s");
            //                                $(this).find("span").addClass("ui-icon ui-icon-triangle-1-n");
            //                                gr.slideDown(360);
            //                            }
            //                            else {
            //                                $(this).find("span").removeClass("ui-icon ui-icon-triangle-1-n");
            //                                $(this).find("span").addClass("ui-icon ui-icon-triangle-1-s");
            //                                gr.slideUp(360);
            //                            }

            //                        }).mouseout(function () {
            //                            $(this).css("background-color", ""); //99CCFF
            //                        })
            //                        .mousemove(function () {
            //                            $(this).css("background-color", "#86A3BD");
            //                        })



            $(".selecte p").append('<span style="float:right;" class="ui-icon ui-icon-triangle-1-s"></span>');


            $("#datatime").datepicker();


            //判断下拉菜单打开和关闭
            $(".selecte p")
            .click(function () {
                var spans = $(this).find("span");
                var ul = $(this).next("ul");
                if (ul.css("display") == "none") {
                    $(this).parent().attr("tabindex", 0).css("outline", "none").focus();
                    ul.slideDown(360);
                    spans.removeClass("ui-icon ui-icon-triangle-1-n");
                    spans.addClass("ui-icon ui-icon-triangle-1-s");
                    $(this).parent().blur(function () {
                        ul.slideUp(360);
                        spans.removeClass("ui-icon ui-icon-triangle-1-s");
                        spans.addClass("ui-icon ui-icon-triangle-1-n");
                    })
                }
                else {
                    ul.slideUp(360);
                    spans.removeClass("ui-icon ui-icon-triangle-1-s");
                    spans.addClass("ui-icon ui-icon-triangle-1-n");
                }
            });

            $(".selecte ul li a").live("click", function (e) {
                $(this).parents("ul").hide();
                $(this).parents("ul").prev().html($(this).text() + '<span style="float:right;" class="ui-icon ui-icon-triangle-1-s"></span>').attr("id", $(this).attr("rel"));
            })


            $("#GridView table tr td").live({ mouseenter: function () {
                $(this).parent().css("background-color", "#99CCFF");
            }, mouseleave: function () {
                $(this).parent().css("background-color", "");
            }
            })




            var pageindex = 1;
            var maxpagesize = 0;
            var pagesize = 10;
            var sort = "user_id";
            var opt = "";

            function getindex() {
                if (maxpagesize % pagesize) {
                    return parseInt(maxpagesize / pagesize) + 1;
                }
                else {
                    return parseInt(maxpagesize / pagesize);
                }
            }
            //转到第一页
            $("#firstpage").click(function () {
                pageindex = 1;
                Viwe({
                    pageindex: pageindex, query: $("#search").prev().val()
                });
            })

            //转到最后一页
            $("#lastpage").click(function () { pageindex = getindex(); Viwe({ pageindex: pageindex, query: $("#search").prev().val() }); });

            //下一页
            $("#Thenextpage").click(function () {
                if (pageindex >= getindex()) {
                    return false;
                }
                pageindex += 1;
                Viwe({ pageindex: pageindex, query: $("#search").prev().val() });
            });

            //上一页
            $("#Ononepage").click(function () {
                if (pageindex <= 1) {
                    return false;
                }
                pageindex -= 1;
                Viwe({ pageindex: pageindex, query: $("#search").prev().val() });
            })


            //查询  并分页 pageindex: 当前页数 ，pagesize: 每面多少条数据 , query: 查询条件, UserFlag: 是否在职
            function Viwe(querystring) {
                var defaults = { model: 1, pageindex: 1, pagesize: pagesize, query: "", UserFlag: 1, sort: sort, opt: opt };
                var query = $.extend(defaults, querystring);
                $.ajax({ url: "/User.aspx", type: "post", datatype: "text", data: query, success: function (data) {
                    var dataObj = eval("(" + data + ")");
                    maxpagesize = dataObj.count;
                    $("#indexpage").val(pageindex);
                    $("#maxpage").html('/' + getindex());
                    $("#GridView").html(dataObj.table);
                    $("#GridView table tbody tr").append("<td><a>删除</a></td>");
                    $("#GridView table tr td a").bind("click", function () {
                        var id = $(this).parents("tr").attr("id");
                        $("<div>是否删除</div>").dialog({
                            Boolean: true,
                            resizable: false,
                            buttons: {
                                "是": function () {
                                    $(this).dialog("close");
                                    var deletes = { model: 3, id: id };
                                    $.post("/User.aspx", deletes, function (data) {
                                        alert(data);
                                        if (data == -1) {
                                            $("<div>未能删除或已被删除<div>").dialog();
                                            return false;
                                        }
                                        Viwe({ model: 1, pageindex: pageindex, pagesize: pagesize, query: $("#search").prev().val(), UserFlag: 1, sort: sort, opt: opt });
                                    });

                                },
                                "否": function () { $(this).dialog("close"); }
                            }
                        });
                    })
                },
                    error: function () {
                        $("<div>网络连接失败</div>").dialog();
                    }
                })
            }

            //按条件查询
            $("#search").click(function () {
                Viwe({ model: 1, pageindex: 1, pagesize: pagesize, query: $(this).prev().val(), UserFlag: 1 });
            })


            var id;

            $("#GridView table tbody tr td").live("dblclick", function () {
                var $td = $(this).parent().find("td");
                $(this).parents("tbody").find("tr td").css("background-color", "");
                $(this).parent().find("td").css("background-color", "#90ACC6");
                id = $td.eq(0).text();
                $("#username").val($td.eq(1).text());
                $.each($("#dep ul li a"), function () {
                    if ($td.eq(2).text() == $(this).text()) {
                        $("#dep p").attr("id", $(this).attr("rel"));
                    }
                });
                $("#dep p").html($td.eq(2).text() + '<span style="float:right;" class="ui-icon ui-icon-triangle-1-s"></span>');
                $.each($("#job ul li a"), function () {
                    if ($td.eq(3).text() == $(this).text()) {
                        $("#job p").attr("id", $(this).attr("rel"));
                    }
                });
                $("#job p").html($td.eq(3).text() + '<span style="float:right;" class="ui-icon ui-icon-triangle-1-s"></span>');
                $("#title p").html($td.eq(4).text() + '<span style="float:right;" class="ui-icon ui-icon-triangle-1-s"></span>');
                $("#datatime").val($td.eq(5).text());
            })

            $("#Save").click(function () {
                var username = $("#username").val(), dep = $("#dep p").attr("id"),
                job = $("#job p").attr("id"), title = $("#title p").text(),
                time = $("#datatime").val();

                if (username != "" && time != "") {
                    $.ajax({
                        url: "/User.aspx",
                        type: "post",
                        datatype: "json",
                        data: { model: 4, username: username, dep: dep, job: job, title: title, time: time, id: id },
                        success: function (data) {
                            $("<div>" + data + "</div>").dialog();
                            Viwe({ model: 1, pageindex: pageindex, pagesize: pagesize, query: $("#search").prev().val(), UserFlag: 1 });
                        }
                    })
                }
                else {
                    $("<div>不能有空项</div>").dialog();
                }
            });

            //            $("#GridView table tr td").live("dblclick", function () {
            //                if ($(this).text() == "") {
            //                    return false;
            //                }
            //                var text = $(this).text();
            //                var index = $(this).index();
            //                if (index == 1) {
            //                    $(this).text("").append("<input maxlength=\"6\" type=\"text\" />");
            //                    $(this).find("input").val(text).focus().blur(function () {
            //                        $(this).parent().text($(this).val());
            //                        $(this).remove();
            //                    });
            //                }
            //            })


            //跳到指定的页
            $("#pages").click(function () {
                pageindex = parseInt($("#indexpage").val());
                if (pageindex < getindex() + 1 && pageindex > 0) {
                    Viwe({ model: 1, pageindex: pageindex, pagesize: pagesize, query: $("#search").prev().val(), UserFlag: 1 });
                }
            })

            $("#pagesize ul li a").click(function (e) {
                pagesize = $(this).text();
                pageindex = 1;
                Viwe({ model: 1, pageindex: pageindex, pagesize: pagesize, query: $("#search").prev().val(), UserFlag: 1 });
            })

            //取得部门和岗位信息
            function SelectView() {
                var Select = { model: 5 };
                $.post("/User.aspx", Select, function (data) {
                    var data = eval("(" + data + ")");
                    $("#dep").append(data.dep);
                    $("#job").append(data.job);
                })
            }


            //增加
            $("#add").click(function () {
                var username = $("#username").val(), dep = $("#dep p").attr("id"),
                job = $("#job p").attr("id"), title = $("#title p").text(),
                time = $("#datatime").val();

                if (username != "" && dep != "请选择部门" && job != "请选择岗位" && title != "请选择职称" && time != "") {
                    var china = new RegExp(/^[\u4e00-\u9fa5]{2,6}|\w{3,9}$/);
                    if (!china.test(username)) {
                        $("<div>请输入中文名2-6字</div>").dialog();
                        return false;
                    }

                    var timeformat = new RegExp(/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29))$/);
                    if (!timeformat.test(time)) {
                        $("<div>请正确输入时间，如：2013-01-9</div>").dialog();
                        return false;
                    }
                    $("<div>确认增加</div>").dialog({ buttons: {
                        "是": function () {
                            $.ajax({
                                url: "/User.aspx",
                                type: "post",
                                datatype: "json",
                                data: { model: 2, username: username, dep: dep, job: job, title: title, time: time },
                                success: function (data) {
                                    $("<div>" + data + "</div>").dialog();
                                }
                            })
                        },
                        "否": function () {
                            $(this).dialog("close");
                            return false;
                        }
                    }
                    });
                }
                else {
                    $("<div>不能有空项或默认项</div>").dialog();
                }
            })

            //排序Viwe({ model: 1, pageindex: pageindex, pagesize: pagesize, query: $("#search").prev().val(), UserFlag: 1, sort: sort, opt: opt });
            $("#GridView table thead tr td").live("click", function () {
                opt = "";
                var colunmname = $(this).text();
                switch (colunmname) {
                    case "员工号": sort = "user_id";
                        break;
                    case "姓名": sort = "user_name";
                        break;
                    case "部门": sort = "dep_name";
                        break;
                    case "岗位": sort = "job_name";
                        break;
                    case "职称": sort = "user_title";
                        break;
                    case "时间": sort = "user_time";
                        break;
                    default: return false;
                }

                if ($(this).find("span").attr("id") == "asc") {
                    //$("#GridView table thead tr td").find("span").attr("id","asc");
                    opt = 1;
                    Viwe({ model: 1, query: $("#search").prev().val(), UserFlag: 1 });
                    //$(this).append('<span style="float:right;" class="ui-icon ui-icon-triangle-1-n"></span>');
                    return false;
                }
                $("#GridView table thead tr td span").remove();
                Viwe({ model: 1, query: $("#search").prev().val(), UserFlag: 1 });
                //$(this).append("<span id=\"asc\" style=\"float:right;\" class=\"ui-icon ui-icon-triangle-1-s\"></span>")
            })




            SelectView();
            Viwe();


        })
        
    </script>
</head>
<body>
<div style="background-color: #F1F1F1">
    <div id="operate" style="background-color: #F4F8FB; margin-bottom:10px; line-height:30px"><a id="atitel" style="width:100%; height:30; display:block">人员管理<span class="ui-icon ui-icon-triangle-1-n" style=" margin-top:8px; float:right"></span></a>
    </div>
    <div>
    <fieldset style="border: 1px solid #D2D5D8;">
    <legend style="border:1px solid #D2D5D8; padding:5px 10px; font-size:12px">信息</legend>
    <div style=" line-height:24px; margin-bottom:10px">
    <div class="divlabel"><label>　员工名：</label></div><div class="selecte"><input id="username" type="text" class="text" /></div>
    <div class="divlabel"><label>　　部门：</label></div><div id="dep" class="selecte"><p>请选择部门</p></div>
    <div class="divlabel"><label>　　岗位：</label></div><div id="job" class="selecte"><p>请选择岗位</p></div><br />
    <div class="divlabel"><label>　　职称：</label></div><div id="title" class="selecte"><p>请选择职称</p><ul><li><a>高级讲师</a></li><li><a>中级讲师</a></li></ul></div>
    <div class="divlabel"><label>　　时间：</label></div><div class="selecte"><input id="datatime" type="text" class="text" /></div>
    </div>  <br />
    <div style=" margin-bottom:10px">
    <button id="add">增加</button><button id="Save">保存</button>
    </div>
    </fieldset>
    </div>
    <div id="accordion">
    
        <h4 id="grid" style="line-height:30px; cursor:default; border:1px solid #D2D5D8;"><a style="background-color:#86A3BD; height:5px; display:block"></a>人员信息<span class="ui-icon ui-icon-triangle-1-n" style=" margin-top:8px; float:right"></span></h4>
        <div id="grids" style=" display:block; border:1px solid #D2D5D8; height:100%">
             <div style="border:1px solid #D2D5D8; margin:5px 10px; text-align:right; padding:3px 10px;">
             <input type="text" class="text" style="vertical-align:middle" /><label id="search" style=" vertical-align:middle; margin-right:20px; height:19px; margin-left:6px">查询</label>
             </div>
             <div id="GridView" style="margin-top:10px; padding:10px;">
                 <table>
                 <thead><tr><td>员工号<span style="float:right;" class="ui-icon ui-icon-triangle-1-s"></span></td><td>姓名</td><td>部门</td><td>岗位</td><td>职称</td><td>时间</td><td>操作</td></tr></thead>
                     <tr>
                         <td>
                             &nbsp;
                         </td>
                         <td>
                             &nbsp;
                         </td>
                         <td>
                             &nbsp;
                         </td>
                     </tr>
                     <tr>
                         <td>
                             &nbsp;
                         </td>
                         <td>
                             &nbsp;
                         </td>
                         <td>
                             &nbsp;
                         </td>
                     </tr>
                     <tr>
                         <td>
                             &nbsp;
                         </td>
                         <td>
                             &nbsp;
                         </td>
                         <td>
                             &nbsp;
                         </td>
                     </tr>
                 </table>
             </div>
             <div style=" text-align:right; margin-bottom:5px; padding:3px 6px; border:1px solid #D2D5D8; margin-left:10px; margin-right:10px; height:18px; line-height:18px;">
                 <div id="pagesize"  class="selecte"><p style=" width:36px">10</p><ul style=" width:46px; overflow:visible"><li><a>10</a></li><li><a>20</a></li><li><a>30</a></li><li><a>50</a></li></ul></div><div><button class="dialog_link ui-state-default ui-corner-some floatRight" id="firstpage" style=" height:18px">
                 首页</button><button class="dialog_link ui-state-default ui-corner-some floatRight" id="Ononepage" style="height:18px;">上一页</button>
                 <input id="indexpage" style=" text-align:right; width:36px; height:10px" 
                     maxlength="3" /><span id="maxpage">/50</span><button class="dialog_link ui-state-default ui-corner-some floatRight" id="pages" style="height:18px; width:50px; font-size:8px; line-height:12px">跳转</button><button class="dialog_link ui-state-default ui-corner-some floatRight" id="Thenextpage" style="height:18px">下一页</button><button class="dialog_link ui-state-default ui-corner-some floatRight" style=" height:18px" id="lastpage">
                 尾页</button>
                 </div>
             </div>
        </div>
    </div>
</div> 

</html>